<template>
  <el-dialog
    v-if="open"
    :title="title"
    v-model="open"
    draggable
    :close-on-click-modal="false"
    width="600px"
    append-to-body
    :before-close="cancel"
  >
    <div class="dialog-container">
      <el-form
        :model="queryParams"
        :rules="rules"
        ref="queryRef"
        label-width="100px"
      >
        <el-form-item label="计划时间" prop="date">
          <el-date-picker
            v-model="queryParams.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="产线-工艺段" prop="line">
          <el-tree
            v-model="queryParams.line"
            ref="tree"
            :data="matList"
            show-checkbox
            node-key="code"
            :props="defaultProps"
            default-expand-all
            @check-change="handleCheckChange"
          >
          </el-tree>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="UserSelect">
import { toRefs } from "vue";
import { getMatCodeList } from "@/api/technology/processRoute";

const { proxy } = getCurrentInstance();
const props = defineProps([
  "placeholder",
  "title",
  "multiple",
  "openWorderOrderBatch",
  "orderList",
]);
const { title, multiple, openWorderOrderBatch, orderList } = toRefs(props);
const emit = defineEmits(["change"]);
const open = ref(false);
const defaultProps = ref({
  children: "children",
  label: "name",
});
const matList = ref([]);
const currentRow = ref();

const data = reactive({
  queryParams: {},
  rules: {
    date: [{ required: true, message: "计划时间不能为空", trigger: "change" }],
    line: [
      { required: true, message: "产线工艺段不能为空", trigger: "change" },
    ],
  },
});

const { queryParams, rules } = toRefs(data);

watch(openWorderOrderBatch, (val) => {
  console.log(val, "=====openWorderOrderBatch");
  open.value = val;
  queryParams.value.date = [
    orderList.value[0].planStartTime,
    orderList.value[0].planEndTime,
  ];
  getMatCodeListData();
});

const handleCurrentChange = (val) => {
  if (!multiple.value) {
    currentRow.value = val;
  }
};

function getMatCodeListData() {
  let params = {
    matCode: orderList.value[0].prodCode,
    planNum: orderList.value[0].planNumber,
  };
  getMatCodeList(params).then((res) => {
    matList.value = res?.data || [];
  });
}

/** 节点单击事件 */
function handleCheckChange(data, checked, indeterminate) {
  let res = proxy.$refs.tree.getCheckedNodes();
  queryParams.value.line = res;
}

function submitForm() {
  proxy.$refs["queryRef"].validate((valid) => {
    if (valid) {
      let res = proxy.$refs.tree.getCheckedNodes();
      let newArr = res.map((item) => item.code);
      let arrP = [];
      let arrC = [];
      console.log(res, "===res");
      for (let i in res) {
        if (res[i]?.children) {
          arrP.push(res[i].code);
        }
        if (!res[i]?.children) {
          arrC.push(res[i].code);
        }
      }
      let obj = { arrP: arrP, arrC: arrC, date: queryParams.value.date };

      console.log(newArr);
      emit("changeWorderOrderBatchList", obj);
    }
  });
}
function cancel() {
  emit("changeWorderOrderBatchList", []);
}
</script>
